<template>
  <!-- 审核服务详情（配合面包屑管理新增） -->
  <div class="container">
    <Header :showRefresh="false" @refresh="() => {}">
      <template #leftTitle>
        <router-link :to="{ name: 'ServiceAudit' }">审核列表</router-link>
        <el-icon class="v-align-top"> <arrow-right-bold /> </el-icon>
      </template>
    </Header>
    <div class="page-main">
      <h4 class="divider">基本信息</h4>
      <ul class="base-list">
        <li>
          <div class="li-inner">
            <p>
              <span> 服务中文名称：</span>
              {{ baseDetail.svc.svcName }}
            </p>
          </div>
        </li>
        <li>
          <div class="li-inner">
            <p><span> 方法名称：</span> {{ baseDetail.svc.svcUrl }}</p>
          </div>
        </li>
        <li>
          <div class="li-inner">
            <p :title="baseDetail.svc.appName">
              <span> 所属应用：</span>
              {{ baseDetail.svc.appName }}
            </p>
          </div>
        </li>
        <li>
          <div class="li-inner">
            <p>
              <span>服务调用超时：</span> {{ baseDetail.svc.callTimeout }}ms
            </p>
          </div>
        </li>
        <li>
          <div class="li-inner">
            <p>
              <span> 当前版本：</span>
              {{ versionList.get(baseDetail.svc.currentVersionId) }}
            </p>
          </div>
        </li>
        <li>
          <div class="li-inner">
            <p :title="baseDetail.svc.memo">
              <span> 备注：</span> {{ baseDetail.svc.memo }}
            </p>
          </div>
        </li>
      </ul>
      <h4 class="divider">服务入参配置</h4>
      <el-table :data="baseDetail.inParamsList" style="width: 100%">
        <el-table-column prop="paramName" label="参数名称" />
        <el-table-column prop="paramNameCn" label="中文名称" />
        <el-table-column prop="type" label="类型" />
        <el-table-column prop="defaultValue" label="默认值" />
      </el-table>
      <h4 class="divider">接口配置</h4>
      <ul class="base-list" v-if="baseDetail.ifType == 'HTTP'">
        <li>
          <div class="li-inner">
            <p>
              <span>数据源：</span>
              {{ srcOptions.get(typeHttp.srcId) }}
            </p>
          </div>
        </li>
        <li>
          <div class="li-inner">
            <p :title="typeHttp.ifUrl">
              <span>接口URL：</span> {{ typeHttp.ifUrl }}
            </p>
          </div>
        </li>
        <li>
          <div class="li-inner">
            <p><span>调用超时：</span> {{ typeHttp.callTimeout }}ms</p>
          </div>
        </li>
        <li>
          <div class="li-inner">
            <p>
              <span>支持格式：</span>
              {{ typeHttp.inParamsFormat }}
            </p>
          </div>
        </li>
        <li>
          <div class="li-inner">
            <p><span>接口请求方式：</span> {{ typeHttp.httpMethod }}</p>
          </div>
        </li>
      </ul>
      <ul class="base-list" v-if="baseDetail.ifType == 'DB'">
        <li class="w100">
          <p>
            <span> 数据源名称：</span>
            {{ srcOptions.get(typeDb.srcId) }}
          </p>
        </li>
        <li class="w100">
          <p><span>SQL语句： </span> {{ typeDb.sqlStmt }}</p>
        </li>
      </ul>
      <ul class="base-list" v-if="baseDetail.ifType == 'JAR'">
        <li class="w100">
          <p><span>类名称：</span> {{ typeJar.classFullName }}</p>
        </li>
        <li class="w100">
          <p><span>jar 文件地址：</span> {{ typeJar.jarFile }}</p>
        </li>
      </ul>
      <!-- 授权的应用 -->
      <authorization-application></authorization-application>
      <div class="export-api">
        <el-button type="primary" @click="exportApi">导出接口文档</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ArrowRightBold } from "@element-plus/icons-vue";
import FilterBar from "@/components/FilterBar.vue";
import AuthorizationApplication from "./components/AuthorizationApplication.vue";
import Header from "@/components/Header.vue";
import { onMounted, reactive, toRefs } from "vue";
import { detailService } from "@/api/service";
import { downloadTXT } from "@/utils/index.js";
import { getDataSourcePageList } from "@/api/adaptation";
import downloadStr from "./components/downloadStr";
import { useRoute, useRouter } from "vue-router";
import SubLayout from "@/components/SubLayout";
const router = useRouter();
const route = useRoute();
const id = route.query.id;
const state = reactive({
  typeDb: {},
  typeHttp: {},
  typeJar: {},
  srcOptions: new Map(),
  versionList: new Map(),
  baseDetail: {
    inParamsList: [],
    versionId: "",
    svc: {},
    ifParam: {
      adptIfCfgDb: {},
      adptIfCfgHttp: {},
      adptIfCfgJar: {},
    },
    outParamsList: [],
    ifType: "",
  },
});
const { typeDb, typeHttp, typeJar, srcOptions, baseDetail, versionList } =
  toRefs(state);
const getDetail = async (id) => {
  let { data } = await detailService(id);
  const { ifParam = {}, inParamsList = [], outParamsList = {} } = data;
  state.baseDetail = data;
  state.typeDb = ifParam?.adptIfCfgDb || {};
  state.typeHttp = ifParam?.adptIfCfgHttp || {};
  state.typeJar = ifParam?.adptIfCfgJar || {};
  data.svc.versionList.forEach((it) => {
    state.versionList.set(it.versionId, it.versionNum);
  });
};

// 数据源列表
const srcList = async () => {
  let { data } = await getDataSourcePageList({ page: 1, size: 99999 });
  data.list.forEach((it) => {
    state.srcOptions.set(it.id, it.srcName);
  });
};

// 导出接口
const exportApi = () => {
  downloadTXT("接口文档.md", downloadStr(state.baseDetail));
};

onMounted(async () => {
  srcList();
  getDetail(id);
});
</script>

<style lang="scss" scoped>
ul.base-list {
  overflow: hidden;

  li {
    width: 33.33%;
    display: inline-block;
    line-height: 30px;
    margin-bottom: 10px;
    padding: 0 10px;

    .li-inner {
      padding: 0 5px;
    }

    &.w100 {
      width: 100%;
    }

    p {
      min-height: 30px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #3c475d;
    }

    span {
      font-weight: bolder;
    }
  }
}

.desc {
  padding: 10px 0;
}

.export-api {
  border-top: solid 1px #ebeef5;
  padding: 10px 0;
  margin-top: 10px;
}
</style>
